<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />

<style>
body {
	margin-top: 20px;
	margin: 0 auto;
	width: 100%;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
</head>

<body>


	<!-- 引入header.jsp -->
	<div id="header"></div>
	<div class="row" style="width: 1210px; margin: 0 auto;">
		<div class="col-md-12">
			<ol class="breadcrumb">
				<li><a href="#">首页</a></li>
				<li><a href="product_list.jsp?gtype=1">手机</a></li>
				<li><a href="product_list.jsp?gtype=2">平板</a></li>
				<li><a href="product_list.jsp?gtype=3">电脑</a></li>
			</ol>
		</div>
		<ul id="ulclass"></ul>
	</div>

	<!--分页 -->
	<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
			<!-- <li class="disabled"><a href="#" aria-label="Previous"><span
					aria-hidden="true">&laquo;</span></a></li>
			<li class="active"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
			<li><a href="#">7</a></li>
			<li><a href="#">8</a></li>
			<li><a href="#">9</a></li>
			<li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
			</a></li> -->
			<div id="test1"></div>
		</ul>
	</div>
	<!-- 分页结束 -->

	<!--商品浏览记录-->
	<div>		
		<ul id="liulan" style="width: 1210px; margin: 0 auto; padding: 0 9px; border: 1px solid #ddd; border-top: 2px solid #999; height: 246px;"></ul>
		</div>
	</div>
	<div id="footer"></div>
	
	<script src="https://www.layuicdn.com/layui/layui.all.js"></script>

	<!-- 引入footer.jsp -->
<script type="text/javascript">
//加载头部
$.post('header.jsp',{},function(data){
	$("#header").html(data);
},'text');


//加载尾部
$.post('footer.jsp',{},function(data){
	$("#footer").html(data);
},'text');


</script>
</body>

</html>

<script type="text/javascript">
	function getUrlSearch(name) {
	  // 未传参，返回空
	  if (!name) return null;
	  // 查询参数：先通过search取值，如果取不到就通过hash来取
	  var after = window.location.search;
	  after = after.substr(1) || window.location.hash.split('?')[1];
	  // 地址栏URL没有查询参数，返回空
	  if (!after) return null;
	  // 如果查询参数中没有"name"，返回空
	  if (after.indexOf(name) === -1) return null;
	 
	  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
	  // 当地址栏参数存在中文时，需要解码，不然会乱码
	  var r = decodeURI(after).match(reg);
	  // 如果url中"name"没有值，返回空
	  if (!r) return null;
	  return r[2];
	}
	
	
</script>
<script>
	layui.use(['form','jquery','laypage'],function(){
		var $=layui.jquery;
		var laypage=layui.laypage;
		var gtype=getUrlSearch('gtype');
		var page=getUrlSearch('page');
		var obj={
				"gtype":gtype,
				"page":page
		};
		$.post('/heima/findGoodsTypeList',obj,function(date){
			//执行一个laypage实例
			console.log(date);
			layuipage(laypage,date.count);
			insertHtmlUlLi(date);
		},'json');
	});
	function layuipage(laypage,num){
		laypage.render({
		    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
		    ,count: num //数据总数，从服务端得到
		    ,theme: '#ff0066'
		    ,groups:3
		    ,jump: function(obj, first){
		      	if(!first){//首次不执行
			        //layer.msg('第 '+ obj.curr +' 页');]
			        //得到点击的分页的数据
			        var page=obj.curr;
			        //清空ul li
			        $("#ulclass").empty();
			        //发送ajax请求 加载数据
			        var obj={
			        	"page":page
			        };
			        $.post('/heima/findGoodsTypeList',obj,function(date){
			        	insertHtmlUlLi(date);
			        },'json');
			    };
	   		 }
		});
		var uid=getUrlSearch('uid');
		var page=getUrlSearch('page');
		var obj={
				"uid":uid,
				"page":page
		};
        $.post('/heima/getUserFoot',obj,function(data){
        	console.log(data);
        	var html="";
        	for(var i=0;i<data.list.length;i++){
        		var str='<li style="float:left">';
        		str+='<div><img width=100 src='+data.list[i].gphoto+'></div>';
        		str+='<div><a href="product_info.jsp?gid='+data.list[i].gid+'&gtype=2">'+data.list[i].gname+'</div>';
        		str+='</li>';
        		html+=str;
        	}
        	
        	$("#liulan").html(html);
        	
        },'json');
	}
	function insertHtmlUlLi(date){
		var html="";
		for(var i=0;i<date.list.length;i++){
			var str="<li style='float:left;list-style-type:none'>";
			str+="<div class='remen mingxing fl mb20' id='mingxing2'>";
			str+="<div class'sub_mingxing'>";
			str+="<a href='product_info.jsp?gid="+date.list[i].gid+"'><img width=200px src='"+date.list[i].gphoto+"'  alt=''></a>";
			str+="</div>";
			str+="<div class='pinpai'>";
			str+="<a href='product_info.jsp?gid="+date.list[i].gid+"'>"+date.list[i].gname+"</a>";
			str+="</div>";
			str+="<div class='jiage'>"+date.list[i].gprice+"</div>";
			str+="</div>";
			str+="</li>";
			html+=str;
		}
		$("#ulclass").html(html);
	}
</script>